doctype html
html
	head
		title Miaou Help
		link(rel="icon",type="image/png",href="static/M-32.png")
		link(rel='stylesheet', href='static/themes/'+theme+'/miaou.css')
		script(src="static/jquery-2.1.3.min.js")
		script(src="static/help.min.js")
		script(src="static/miaou.min.js")
	body#help-body
		#help-nav
			a#help-miaou-logo-wrapper(href="rooms")
				object.Miaou-logo(type="image/svg+xml",data="static/Miaou.svg")
			h1 Help
			#help-summary
		#help-content
			h1 Miaou Help
			h2 About
			div
				p Miaou is an <a target=_blank href=https://github.com/Canop/miaou>open-source</a> multi-room persisted chat server.
				p Miaou is open : you can create your own rooms, be them public or private.
			h2 Writing Messages
			div
				p You send a message by typing in the text area at the bottom of the screen and then hitting <kbd>⏎</kbd>.
				p When you want to start a new line without immediately sending your message, hit <kbd>ctrl</kbd><kbd>⏎</kbd> or <kbd>alt</kbd><kbd>⏎</kbd> or <kbd>⇧</kbd><kbd>⏎</kbd>.
				p Miaou uses a specific flavour of Markdown in order to allow a better formatting without being too flashy or distracting. The following sections mostly detail that syntax and the related shortcuts.
				h3 Italic and Bold
				div
					p You can set some text in italic or in bold by writing it between stars or double stars.
					pre *This sentence is in italic.* Not this one. **This one is in bold.**
					p would appear as
					div.message-content <i>This sentence is in italic.</i> Not this one. <b>This one is in bold.</b>
					p But you don't <i>have</i> to write the stars yourself, you can select some text and hit <kbd>ctrl</kbd><kbd>I</kbd> or <kbd>ctrl</kbd><kbd>B</kbd>.
				h3 Citations
				div
					p A citation appears like this :
					div.message-content: span.citation this is a citation
					p You can write the markdown yourself :
					pre > this is a citation
					p Or you can select some text and hit <kbd>ctrl</kbd><kbd>Q</kbd>.
					p If you want to set just one line in citation, you can put your cursor in the line before hitting <kbd>ctrl</kbd><kbd>Q</kbd> without selecting the whole line.
				h3 Links
				div
					p When you paste an URL, it appears in the code as you'd expect :
					div.message-content: A link : <a href=http://dystroy.org/miaou/help#Links>http://dystroy.org/miaou/help#Links</a>
					p If you want to give a specific label, as in
					div.message-content: A link : <a href=http://dystroy.org/miaou/help#Links>How to do links</a>
					p then you may use this Markdown syntax :
					pre link : [How to do links](http://dystroy.org/miaou/help#Links)
				h3 Images
				div
					p If the URL of an image is the only thing you have in one line of your message, then the image is boxed. For example the message
					pre http://dystroy.org/re7210/img/tartines-saint-jacques-850-02.jpg
					p is rendered as
					div.message-content(style="width:500px"): a(href="http://dystroy.org/re7210/img/tartines-saint-jacques-850-02.jpg",target="_blank"): img(src="http://dystroy.org/re7210/img/tartines-saint-jacques-850-02.jpg")
					p If the image you want to display isn't available on internet but is on your computer, hit the <kbd>Upload</kbd> button. You'll then be presented a file selection dialog. The chosen image will be uploaded to imgur and inserted in your message.
					p On Chrome, you may also directly paste an image from the clipboard to the input area.
				h3 Code
				div
					p Code can be inlined in the text :
					div.message-content You can use <code>Array.apply(0,Array(N)).map(Math.random)</code> to generate an array of N random numbers.
					p This is done using backtick quotes :
					pre You can use `Array.apply(0,Array(N)).map(Math.random)` to generate an array of N random numbers.
					p You can also have whole blocks of code :
					div.message-content Here's a fast replacement for jQuery's old <code>toggle</code> function :<code class=indent><br>$.fn.toggleFuncs = function() {<br>    var functions = Array.prototype.slice.call(arguments);<br>    var _this = this.click(function(){<br>        var i = _this.data('func_count') || 0;<br>        functions[i%functions.length].call(_this);<br>        _this.data('func_count', i+1);<br>    });<br>}</code>
					p To do that, indent the whole block of code with four spaces or a tabulation :
					pre
						span Here's a fast replacement for jQuery's old `toggle` function :
						div.indent.
							$.fn.toggleFuncs = function() {
								var functions = Array.prototype.slice.call(arguments);
								var _this = this.click(function(){
									var i = _this.data('func_count') || 0;
									functions[i%functions.length].call(_this);
									_this.data('func_count', i+1);
								});
							}
					p You don't have to manually put the backtick quotes or the tabulations : you may also use <kbd>ctrl</kbd><kbd>K</kbd>.
					p When you hit <kbd>ctrl</kbd><kbd>K</kbd> just after having pasted some code, you don't have to select it, it will automatically apply to the pasted text.
					p When the cursor is in a block of code, a menu appears and let you choose the coding language, which will be used for syntactic coloration.
				h3 Ping and reply
				div
					p You can alert another user by typing an arobase followed by her username in a message, as in
					pre Hello @dystroy !
					p If the user checked the "Be notified on ping" checkbox, she'll see a silent notification.
					p By hovering the name of a user in the list at the left, you reveal a <i>ping</i> button which inserts the related ping in the message area.
					p If you choose to type the name instead of using the button, it's autocompleted. Hit the <kbd>tab</kbd> and <kbd>esc</kbd> keys to navigate through proposals. Users having been seen recently in the room are listed first but you can also ping somebody who never came to the room, she will get an invitation to join it.
					p By hovering the message of another user, you reveal a reply button. Replying inserts a specific type of ping, including a link to that message.
					p But the easiest way to reply to a message is usually to select it with an arrow button while holding the ctrl key down.
				h3 Content Automatic Boxing
				div
					p Some links are automatically rendered in Miaou messages:
					ul
						li links to wikipedia pages are rendered as abstracts with links
						li links to many Stack Exchange sites (including Stack Overflow) are rendered in place
						li links to YouTube videos are replaced with a player
						li links to images
				h3 Other Formatting Features
				div
					p The special formatting of Miaou messages allow other features. Some of them are even introduced by plugins. 
					p Some examples:
					ul
						li tables (like the one you get if you type the <code>!!stats rooms</code> command)
						li lists
						li graphs
					p The best to discover them is usually to ask other users.
				h3 Keyboard Shortcuts
				div
					table.indent
						tr
							td <kbd>⏎</kbd>
							td sends the message
						tr
							td <kbd>alt</kbd><kbd>⏎</kbd>
							td inserts a new line
						tr
							td <kbd>⇧</kbd><kbd>⏎</kbd>
							td inserts a new line
						tr
							td <kbd>ctrl</kbd><kbd>⏎</kbd>
							td inserts a new line
						tr
							td <kbd>ctrl</kbd><kbd>I</kbd>
							td sets the selection in italic
						tr
							td <kbd>ctrl</kbd><kbd>B</kbd>
							td sets the selection in bold
						tr
							td <kbd>ctrl</kbd><kbd>Q</kbd>
							td converts the selection or the just pasted text to citation
						tr
							td <kbd>ctrl</kbd><kbd>K</kbd>
							td converts the selection or the just pasted text to code (extend it to whole lines if there's a new line inside)
						tr
							td <kbd>ctrl</kbd><kbd>L</kbd>
							td makes a link from the selected text
						tr
							td <kbd>↑</kbd>
							td lets you edit your previous message, if it's not too old. Use <kbd>↓</kbd> to get back
						tr
							td <kbd>ctrl</kbd><kbd>↑</kbd>
							td select a message to reply to
						tr
							td <kbd>tab</kbd>
							td navigates through autocompletion proposals
						tr
							td <kbd>esc</kbd>
							td gets you out of an autocompletion proposal, or out of a message editing
					p Most often, the effect of a shorctut is reversed by redoing it. Some actions like replying or editing can be cancelled with the <kbd>esc</kbd> key
			h2 Actions on messages
			div
				p By hovering a message you reveal its date and a few buttons buttons allowing various actions.
				h3 Votes
				div
					p
						| There are 4 vote buttons :
						span.vote &#xe801;
						span.vote &#xe800;
						span.vote &#xe808;
						span.vote &#xe813;
					p Those buttons let you express an appreciation or ensure the visibility of important messages.
					table.indent
						tr
							td.vote &#xe801;
							td Downvoting means that you disagree with or don't appreciate the message.
						tr
							td.vote &#xe800;
							td Upvoting lets you show your appreciation or your agreement.
						tr
							td.vote &#xe808;
							td Starring a message gives it some visibility.
						tr
							td.vote &#xe813;
							td Pinning a message ensure its visibility in a much greater way than a star. Only room admins can do that.
				h3 Permanent links
				p
					| By right-clicking the
					span.vote &#xe815;
					| button, you can copy a permanent link to the message.
				h3 Floating messages
				p
					| The
					span.vote &#xe81d;
					| button lets you float a message in a window over the rest of the interface. Such a floating message isn't scrolled away when there's more messages coming in the chat, which is especially convenient for video or game messages. A floating message can be reduced to one of the four sides of the chat window. If the message is edited or changed, the reduced tab will take a yellow or red border.
				h3 Editing
				div
					p
						| To edit one of your recent messages, simply hover it to reveal the <kbd>edit</kbd> button, change it, and then resubmit it. It will appear with the
						span.vote &#xe80c;
						| icon to everybody.
					p Instead of going for the button, you can also use the <kbd>↑</kbd> arrow key to edit your last message.
					p
						| Messages marked with
						span.vote &#xe824;
						| icon can be edited by anybody. Those messages are "white boards" and are created by starting a message with
						code !!whiteboard
			h2 Rooms
			div
				p Any user can create a new room, by clicking the relevant link on the home page. By creating a room you become its owner. You can then nominate admins or even owners.
				p A room is either
				ul
					li public : Anybody can enter.
					li private : Users must be granted access by a room owner or admin. If you click the link to a private room, you'll be proposed to request access.
				p For both types of room, authorization levels can be managed using the <kbd>Authorizations</kbd> button.
				p A room can also be made "not listed" to prevent it to appear listed to people who don't have access to it.
				p If you want to invite in your room a user who's already connected and in another room, the simplest solution is to ping her by typing <code>@hisusername</code>.
				p If the room is private and you're one of the admins, then you may type <code>!!summon @hisusername</code>: not only will the user be invited but you'll also have a dialog offering you to grant that user the right to enter, with the opportunity to see her profile.
				p If you want to invite somebody's who's not connected or maybe not even a user, simply give her the URL of the room.
				p When a user wants to enter a private room before he has the right, she's offered the opportunity to request access. Users in the room see the requests and the room admins may accept or deny the request.
				h3 Dialog Rooms
				div
					p When you hover the name of a user in the left column of the window, you see a <kbd>PM</kbd> button. This button lets you enter a special room created for you and the other user and in which you can discuss privately.
					p You'll be able to get back to this room later, either by using the same <kbd>PM</kbd> button or by looking in the <i>Dialog Rooms</i> tab of Miaou's home page.
			h2 Commands
			div
				p
					| Some commands can be issued by typing their name after <code>!!</code>. They have various effects. To get the complete list, type
					code !!help
				p Here are some examples of commands :
				h3 !!afk and !!back
				div
					p Those commands are used to notify connected users in all the rooms you're in (including the ones you watch) that you're leaving ("away from keyboard") or that you're back. You may add a few words.
				h3 !!pm
				div
					p Use <code>!!pm @someotheruser</code> to start discussing privately with another user.
				h3 !!wiki
				div
					p adds to your message an abstract of the <i>wikipedia.org page</i> in the language of the room. For example :
					p
						code !!wiki Albert Einstein
					p Note that you may also directly insert in a message a link to a wikipedia page (in the language of your choice).
				h3 !!whiteboard
				p This lets you make a message that anybody can edit.
				h3 !!tribo
				p <code>!!tribo @someuser</code> lets you start a game of Tribo. Just try it.
				h3 !!video
				div
					p You may launch a video chat with another connected user. Simply type
					p
						code !!video @somebody
					p Note that both the command (<code>video</code>) and the user name (<code>somebody</code>) are autocompleted as you type (hit <kbd>tab</kbd> to navigate through proposals).
					p If you don't want to see or being seen, you may launch a simple audio chat using
					p
						code !!audio @somebody
					p In both case, no plugin is needed in the browser, it also works on most mobile phones.
					p Some enterprise proxies block streaming. In that case you'll only see a black rectangle instead of the other chatter.
			h2 Miaou Development
			div
				h3 Technical Stack
				p Miaou is mostly coded in JavaScript. Stuff includes Node.js with express, PostgreSQL, OAuth2, socket.io, WebRTC, Bluebird, Jade, Passport.js, jQuery, sass/scss, Redis, hu.js, and nginx.
				h3 Contribute
				p Miaou has a clean and organized source code and should remain so. You may easily dive into the code which is shared on GitHub : <a href=https://github.com/Canop/miaou target=_blank>Canop/miaou</a>. If you'd like to help, contact <code>@dystroy</code> in the Miaou chat room. 
				h3 Plugins
				p Miaou accepts server-side plugins. If you want to contribute a new feature, it probably should be done as a plugin, especially if it doesn't feel like a core feature.
				h3 Use the software on your server
				p You can, of course, it's open-source for a reason. See the <a href="https://github.com/Canop/miaou/blob/master/installation.md">installation documentation</a>. Miaou also provides a <a href="https://github.com/Canop/miaou/blob/master/vagrant/vagrant.md">vagrant configuration</a> to help you quickly set up a development environment. It is based on puppet, so you can as well reuse it.
				
